<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="edit-input address-input" v-if="show.address" v-cloak>
        <input type="text" placeholder="地址">
        <input type="text" placeholder="姓名">
        <input type="text" placeholder="电话">
        <div class="edit-button">
            <button class="empty">取消</button>
            <button @click="saveAddress()">添加</button>
        </div>
    </div>
    <script>
        //拿到表单节点
        var addressInput = document.querySelector('.edit-input.address-input');
        //拿到input数组
        var addressInputInputs = addressInput.querySelectorAll('input');

        //获取输入的值
        var telInputOne = addressInputInputs[0];
        var nicknameInput = addressInputInputs[1];
        var telInput = addressInputInputs[2];

        //获取按钮
        var addButton = addressInput.querySelector('button:last-of-type');

        //监听事件
        addButton.addEventListener('click', function () {
            //拿到值
            var address = telInputOne.value.trim();
            var nickname = nicknameInput.value.trim();
            var tel = telInput.value.trim();

            //判断
            var isAddressValid = validateAddress(address);
            var isNicknameValid = validateNickname(nickname);
            var isTelValid = validateTel(tel);

            if (!isAddressValid) {
                alert('请输入正确的地址 - 必须有【省】或【市】，必须有【州|县|城|区|村|镇|乡|湾|道|路|栋|幢|会|号|苑|巷|递|驿】其中一个');
                return false;
            }

            if (!isNicknameValid) {
                alert('请输入正确的昵称 - 必须为两字到六字中文');
                return false;
            }

            if (!isTelValid) {
                alert('请输入正确的电话号码');
                return false;
            }

            // 如果输入都合法，可以在这里进行相应的逻辑处理
            // ...
        });

        function validateAddress(address) {
            var addressReg = /(省|市).*?(州|县|城|区|村|镇|乡|湾|道|路|栋|幢|会|号|苑|巷|递|驿)/;
            return addressReg.test(address);
        }

        function validateNickname(nickname) {
            var nicknameReg = /^[\u4e00-\u9fa5]{2,6}$/;
            return nicknameReg.test(nickname);
        }

        function validateTel(tel) {
            var telReg = /^1[3456789]\d{9}$/;
            return telReg.test(tel);
        }

    </script>
</body>

</html>